<template>
  <div class="flex container">
    <div id="mycharts01" style="width: 33%; height: 300px"></div>
    <div id="mycharts02" style="width: 33%; height: 300px"></div>
    <div id="mycharts03" style="width: 33%; height: 300px"></div>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const config = reactive({
  option_3_2: {},
});
let arr6 = [
  { name: "代码错误", value: 10 },
  { name: "配置相关", value: 9 },
  { name: "安装部署", value: 8 },
  { name: "安全相关", value: 7 },
  { name: "性能问题", value: 6 },
  { name: "标准示范", value: 5 },
  { name: "测试脚本", value: 4 },
  { name: "设计缺陷", value: 3 },
  { name: "其他", value: 1 },
];

function charts() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = proxy.$echarts.init(document.getElementById("mycharts01"));
  var myChart02 = proxy.$echarts.init(document.getElementById("mycharts02"));
  var myChart03 = proxy.$echarts.init(document.getElementById("mycharts03"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts 入门示例",
      textStyle: {
        color: "white",
      },
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      axisLabel: {
        interval: 0,
        rotate: 30,
        textStyle: {
          color: "white", // 设置横坐标文字颜色为红色
        },
      },
    },
    yAxis: {
      axisLabel: {
        interval: 0,
        // rotate: 30,
        textStyle: {
          color: "white", // 设置横坐标文字颜色为红色
        },
      },
    },
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });

  let obj3 = {
    Xdata: ["赵", "钱", "孙", "李", "周", "吴", "郑", "王"],
    Ydata: [
      { data: [1, 3, 5, 7, 9, 5, 6, 8], name: "致命" },
      { data: [2, 4, 6, 8, 10, 4, 8, 4], name: "严重" },
      { data: [1, 5, 6, 8, 3, 6, 7, 4], name: "中等" },
      { data: [8, 9, 6, 3, 5, 6, 7, 1], name: "轻微" },
    ],
  };
  myChart02.setOption({
    color: ["#fa997b", "#ffbf69", "#fee07d", "#b3df8f"],
    title: {
      text: "代码缺陷密度",
      textStyle: {
        color: "white",
      },
    },
    // tooltip: {
    //   trigger: "axis",
    //   axisPointer: {
    //     // 坐标轴指示器，坐标轴触发有效
    //     type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    //   },
    // },
    //tooltip
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      textStyle: {
        align: "left",
      },
    },
    /*****提示************
   tooltip: {
      trigger: 'axis',
      // confine: true,
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: (params) => {
        let res = ''
        let sum = 0
        for (let i = 0; i < params.length; i++) {
          if (params[i].value != 0) {
            sum += params[i].data
            res += `<span style="background: ${params[i].color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${params[i].seriesName} ：${params[i].data}<br/>`
          }
        }
        return (
          `<span style="background: blue; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> 总数 ：${sum}<br/>` +
          res
        )
      }
    },
      *************/
    xAxis: {
      type: "category",
      data: obj3.Xdata,
      axisLabel: {
        interval: 0,
        rotate: 30,
        textStyle: {
          color: "white", // 设置横坐标文字颜色为红色
        },
      },
    },
    legend: {
      data: ["致命", "严重", "中等", "轻微"],
      right: 40,
      textStyle: {
        color: "white",
        fontSize: 12,
      },
    },
    yAxis: {
      axisLabel: {
        interval: 0,
        // rotate: 30,
        textStyle: {
          color: "white", // 设置横坐标文字颜色为红色
        },
      },
    },
    series: (function () {
      let series = [];
      for (let i = 0; i < obj3.Ydata.length; i++) {
        series.push({
          data: obj3.Ydata[i].data,
          type: "bar",
          stack: "x", //设置这个属性才能堆叠
          name: obj3.Ydata[i].name, //和图例对应
        });
      }
      return series;
    })(),
  });

  myChart03.setOption({
    color: [
      "#5087ec",
      "#68bbc4",
      "#58a55c",
      "#f2bd42",
      "#ee752f",
      "#d95040",
      "#5087ec",
      "#68bbc4",
      "#58a55c",
    ],
    title: {
      text: "缺陷类型",
      textStyle: {
        color: "white",
      },
    },
    legend: {
      orient: "vertical", // 设置图例垂直排列
      align: "right", // 设置图例靠右对齐
      right: 0, // 设置图例距离右侧的距离，
      y: "middle", // 垂直居中
      textStyle: {
        color: "white",
      },
    },
    series: [
      {
        type: "pie",
        data: arr6,
        center: ["40%", "50%"], //位置
        radius: ["20%", "40%"],
        label: {
          normal: {
            show: true,
            formatter: "{a|{b}}" + "\n" + "{b|{d}%}",
            rich: {
              b: {
                align: "right",
                color: "white",
                // fontSize: proxy.px2rem(17)
              },
              a: {
                // align: 'center',
                color: "white",
                // fontSize: proxy.px2rem(15)
              },
            },
          },
        },
      },
    ],
  });
}
onMounted(() => {
  charts();
});
</script>

<style lang="scss">
.container {
  width: 100%;
}
</style>